import { Card, Button, Form, Input, message } from "antd";
import "./index.scss";
import { useDispatch } from "react-redux";
import { fetchLogin } from "@/store/modules/user";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onFinish = async (values) => {
    console.log("Success:", values);
    // 触发异步action
    await dispatch(fetchLogin(values));
    navigate("/");
    message.success("登陆成功");
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="login">
      <Card title="登陆" style={{ width: 500 }}>
        <Form
          validateTrigger="onBlur"
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="手机号"
            name="mobile"
            // rules={[
            //   {
            //     required: true,
            //     message: "请输入手机号",
            //   },
            //   {
            //     pattern: /^1[3-9]\d{9}$/,
            //     message: "请输入正确手机号",
            //   },
            // ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="code"
            // rules={[
            //   {
            //     required: true,
            //     message: "Please input your password!",
            //   },
            // ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;
